HTML table basics
- 表格被
<table></table>
包裹, <td>
element('td'代表'table data')
<td>Hi, I'm your first cell.</td>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
<tr>
代表table row表格行
<tr>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
</tr>
用<th>
来表示表格标题
将表格的标题用语义,<th>
替换<td>
,还可以用scope
属性来让读屏的人一下读一行或者一列。
<th>
代表table header
允许单元格跨越多行和列
使用colspan
和rowspan
属性来改变行、 列,跨越的格数。
用<col>
来对一列应用样式
<col>
和<colgroup>
不然的话需要对每一个单元格应用样式。
例如:
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
用了之后:
<table>
<colgroup>
<col />
<col style="background-color: yellow" />
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>